
<template>
    <ul class="list" >
         <li class="item"   
            v-for="item in letters"
            :key = "item"
            :ref = "item"
            @click = "handleLetterClick"
            @touchstart = "handleTouchStart"
            @touchmove = "handleTouchMove"
            @touchend = "handleTouchEnd"
         >
         {{ item }}
         </li>
    </ul>
</template>

<script>
    export default {
        name :"Alphabet",
        props : {
            cities : Object
        },
        data(){
            return {
                touchStatus:false,
                startY : 0,
                timer : null
            }
        },
        methods:{
            handleLetterClick(e){
                console.log(e.target.innerText)
                this.$emit("change",e.target.innerText)//发送
            },
            handleTouchStart(){
                this.touchStatus = true    
            },
            handleTouchMove(e){
                // this.fn ()
                if (this.touchStatus) {
                    //A字符距离顶部的距离
                    // const startY = this.$refs["A"][0].offsetTop
                    // console.log(startY)
                    //所触控区距离最顶部距离e.touches[0].clientY   79为量出来量出来header高43+search高为36
                    // const touchY =e.touches[0].clientY - 79
                    // console.log(touchY)
                    // // index触控位置的下标   20量为字符的高度
                    // const index =Math.floor( (touchY - this.startY)/20) 
                    // console.log(index)
                    // if (index >= 0 && index < this.letters.length ) {
                    //     this.$emit("change", this.letters[index])
                    // }
                    if (this.timer) {
                        clearTimeout(this.timer)
                    }
                    this.timer = setTimeout(()=>{
                        const touchY =e.touches[0].clientY - 79
                        // console.log(touchY)
                        // index触控位置的下标   20量为字符的高度
                        const index =Math.floor( (touchY - this.startY)/20) 
                        // console.log(index)
                        if (index >= 0 && index < this.letters.length ) {
                            this.$emit("change", this.letters[index])
                        }
                    },100)
                    

                }
            },
            handleTouchEnd(){
                this.touchStatus = false
            },
            // fn () {
            //     console.log('节流')
            // }
        },
        //把cities对象里的内容 A-z 转换成数组  便于操作
        computed: {
            letters () {
                const letters = []
                for (let i in this.cities) {
                    // console.log(i)
                    letters.push(i)
                }
                return letters
            }
        },
        updated(){
            this.startY = this.$refs['A'][0].offsetTop
        }
       
    }
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    
    .list
        display: flex
        flex-direction: column
        justify-content: center
        position: absolute
        top: 1.58rem
        right: 0
        bottom: 0
        width: .44rem
        // background :red
        .item
            line-height: .4rem
            text-align: center
            color: $bgColor


</style>